前言
去年十月的时候接到一个任务，让我在vue项目中引入justgage这个插件，具体过程有点艰辛，但最后还是顺利解决了。最近不是特别忙，所以就想把这个插件改造成vue可以直接使用的样子。源码和文档可在github上查看，也可以直接使用npm安装。
这篇文章主要是对justgage的官方示例进行详细介绍，仔细分析每一个示例与用法。
代码解析
可在github地址查看源码，也可以拉取到本地：
git clone https://github.com/Peggy7/vue-justgage.git然后：
npm install
npm run dev就可以启动项目里，里面一共有16个例子，下面就来详细分析每个例子。
1. defaults(基本)
要使用这个插件首先要指定一个id，并在初始化时传入相应的id名，通过this.$ref来调用draw方法初始化插件，通过传入配置项来改变插件的外观。其中还可以使用data-属性名来指定默认值，data-属性名这种传值方式会覆盖实例化时传入的配置。
这就是插件最基本最简单的用法。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge"></vue-justgage>
<vue-justgage ref="gg2" id="gg2" data-value="25" class="gauge"></vue-justgage>
</div>
</template>
<script>
export default {
data() {
return {
dflt: {
min: 0,
max: 200,
donut: true,
gaugeWidthScale: 0.6,
counter: true,
hideInnerShadow: true
}
}
},
mounted() {
var gg1 = this.$refs.gg1.draw({
id: 'gg1',
value: 125,
title: 'javascript call',
defaults: this.dflt
});
var gg2 = this.$refs.gg2.draw({
id: 'gg2',
title: 'data-attributes',
defaults: this.dflt
});
}
}
</script>2. Auto Adjust(自动调整)
这个例子并没有很特殊的用法，主要是想告诉我们justgage会自动适配容器的大小，在缩放页面的时候可以始终保持非常美观的样子。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1"></vue-justgage>
<vue-justgage ref="g2" id="g2"></vue-justgage>
<vue-justgage ref="g3" id="g3"></vue-justgage>
<vue-justgage ref="g4" id="g4"></vue-justgage>
<p>
JustGage auto-adjusts to the size of containing element. And to the screen zoom level. And screen density. Nice. This means you’ll get clean, sharp and nice looking gauge at all times. Try zooming the page to see the results.
</p>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Big Fella",
label: "pounds"
});
this.g2 = this.$refs.g2.draw({
id: "g2",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Small Buddy",
label: "oz"
});
this.g3 = this.$refs.g3.draw({
id: "g3",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Tiny Lad",
label: "oz"
});
this.g4 = this.$refs.g4.draw({
id: "g4",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Little Pal",
label: "oz"
});
setInterval(() => {
this.g1.refresh(this.getRandomInt(50, 100));
this.g2.refresh(this.getRandomInt(50, 100));
this.g3.refresh(this.getRandomInt(0, 50));
this.g4.refresh(this.getRandomInt(0, 50));
}, 2500);
}
}
</script>3. Counter(计数)
如果将counter属性设置为true，则value值会从0开始增加到指定值，有一个动画效果。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<a href="#" id="g1_refresh" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
g1: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: 72,
min: 0,
max: 100,
donut: true,
gaugeWidthScale: 0.6,
counter: true,
hideInnerShadow: true
});
},
methods: {
random() {
this.g1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>4. Custom Interval(自定义间隔)
我们可以随意的设置最大值和最小值，value的值和颜色根据范围内的百分比自动调整，如果value超出设定地范围也不用担心，justgage会自动做处理。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1"></vue-justgage>
<vue-justgage ref="g2" id="g2"></vue-justgage>
<vue-justgage ref="g3" id="g3"></vue-justgage>
<p>
You need to measure, say, between 350 and 980? No problem, just tell it to justGage. Displayed value and color are calculated as a percentage in defined range, with optional min and max labels shown.
</p>
<p>
Also, if displayed value is out of range, relax and kick your feet up - justGage will take care of it for you.
</p>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(350, 980),
min: 350,
max: 980,
title: "Lone Ranger",
label: "miles traveled"
});
this.g2 = this.$refs.g2.draw({
id: "g2",
value: 32,
min: 50,
max: 100,
title: "Empty Tank",
label: ""
});
this.g3 = this.$refs.g3.draw({
id: "g3",
value: 120,
min: 50,
max: 100,
title: "Meltdown",
label: ""
});
setInterval(() => {
this.g1.refresh(this.getRandomInt(350, 980));
this.g2.refresh(this.getRandomInt(0, 49));
this.g3.refresh(this.getRandomInt(101, 200));
}, 2500);
}
}
</script>5. Custom Node(自定义容器节点)
通过parentNode属性指定容器节点，让仪表盘可在自己期望的地方展示。
<template>
<div>
<div ref="cont" id="cont" class="container">
<vue-justgage v-show="showNode1" ref="gauge1" class="gauge"></vue-justgage>
<vue-justgage ref="gauge2" id="gauge2" class="gauge"></vue-justgage>
<vue-justgage ref="gauge3" id="gauge3" class="gauge" data-title="#3" data-value="75" data-counter="true"></vue-justgage>
<vue-justgage v-show="showNode4" ref="gauge4" class="gauge" data-title="#4" data-value="100" data-counter="true"></vue-justgage>
</div>
<div class="container">
<button type="button" id="g1_show" @click="showG1">Show G1</button>
<button type="button" id="g4_show" @click="showG4">Show G4</button>
</div>
<div class="container">
<button type="button" id="g1_refresh" @click="refresh(1)">Refresh G1</button>
<button type="button" id="g2_refresh" @click="refresh(2)">Refresh G2</button>
<button type="button" id="g3_refresh" @click="refresh(3)">Refresh G3</button>
<button type="button" id="g4_refresh" @click="refresh(4)">Refresh G4</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
gauge1: null,
gauge2: null,
gauge3: null,
gauge4: null,
showNode1: false,
showNode4: false
}
},
mounted() {
this.gauge2 = this.$refs.gauge2.draw({
id: "gauge2",
title: "#2",
value: 50,
min: 0,
max: 100,
humanFriendly: false,
decimals: 0,
counter: true
});
this.gauge3 = this.$refs.gauge3.draw({
id: "gauge3"
});
},
methods: {
showG1() {
if(this.showNode1) {
return;
}else {
this.showNode1 = true;
this.gauge1 = this.$refs.gauge1.draw({
parentNode: this.$refs.gauge1.$el,
width: 150,
height: 150,
title: "#1",
value: 25,
min: 0,
max: 100,
decimals: 0,
counter: true
});
}
},
showG4() {
if(this.showNode4) {
return;
}else {
this.showNode4 = true;
this.gauge4 = this.$refs.gauge4.draw({
parentNode: this.$refs.gauge4.$el,
width: 150,
height: 150
});
}
},
refresh(index) {
var gauge = {
gauge1: this.gauge1,
gauge2: this.gauge2,
gauge3: this.gauge3,
gauge4: this.gauge4
}
if(gauge[`gauge${index}`]) {
gauge[`gauge${index}`].refresh(this.getRandomInt(0, 100));
}
}
}
}
</script>6. Custom Sectors(自定义仪表盘颜色)
value值展示的颜色可以自定义，通过指定customSectors，有3个可选值：color、lo、hi。设置在lo和hi之间的部分显示为color。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge"></vue-justgage>
<p id="gg1_text">0-50 is green, 51-100 is red</p>
<a href="#" id="gg1_refresh" class="button grey" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value : 72.15,
min: 0,
max: 100,
decimals: 2,
gaugeWidthScale: 0.6,
customSectors: [{
color : "#00ff00",
lo : 0,
hi : 50
},{
color : "#ff0000",
lo : 50,
hi : 100
}],
counter: true
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>7. Custom Render Function(自定义值的渲染方式)
value值不止可以显示为数字，还可以自定义在某个范围内显示什么值或文字。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" style="width: 200px; height: 150px; margin: 0 auto;"></vue-justgage>
<a href="#" id="gg1_refresh" class="button grey" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value: 50,
min: 0,
max: 100,
title: "Target",
label: "temperature",
textRenderer: this.customValue
});
},
methods: {
customValue(val) {
if (val < 50) {
return 'low';
} else if (val > 50) {
return 'high';
} else if (val === 50) {
return 'ideal';
}
},
random() {
this.gg1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>8. Customize Style(自定义仪表盘外观)
如果不满意justgage的默认样式，可以自定义自己喜欢的样子，通过修改仪表盘宽度，颜色和阴影，级别颜色，标题颜色，值，最小值和最大值等。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1"></vue-justgage>
<vue-justgage ref="g2" id="g2"></vue-justgage>
<vue-justgage ref="g3" id="g3"></vue-justgage>
<vue-justgage ref="g4" id="g4"></vue-justgage>
<vue-justgage ref="g5" id="g5"></vue-justgage>
<vue-justgage ref="g6" id="g6"></vue-justgage>
<p>
Not digging default style? Then mock your own, Picasso! JustGage features bunch of styling options including gauge width, gauge color and shadow, gauge level colors, colors for title, value, min & max etc.
</p>
<p>
Check non-minified version of justgage.js for list of all setup parameters.
</p>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null,
g5: null,
g6: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Custom Width",
label: "",
gaugeWidthScale: 0.2
});
this.g2 = this.$refs.g2.draw({
id: "g2",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Custom Shadow",
label: "",
shadowOpacity: 1,
shadowSize: 5,
shadowVerticalOffset: 10
});
this.g3 = this.$refs.g3.draw({
id: "g3",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Custom Colors",
label: "",
levelColors: [
"#00fff6",
"#ff00fc",
"#1200ff"
]
});
this.g4 = this.$refs.g4.draw({
id: "g4",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Hide Labels",
hideMinMax: true
});
this.g5 = this.$refs.g5.draw({
id: "g5",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Animation Type",
label: "",
startAnimationTime: 2000,
startAnimationType: ">",
refreshAnimationTime: 1000,
refreshAnimationType: "bounce"
});
this.g6 = this.$refs.g6.draw({
id: "g6",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Minimal",
label: "",
hideMinMax: true,
gaugeColor: "#fff",
levelColors: ["#000"],
hideInnerShadow: true,
startAnimationTime: 1,
startAnimationType: "linear",
refreshAnimationTime: 1,
refreshAnimationType: "linear"
});
setInterval(() => {
this.g1.refresh(this.getRandomInt(0, 100));
this.g2.refresh(this.getRandomInt(0, 100));
this.g3.refresh(this.getRandomInt(0, 100));
this.g4.refresh(this.getRandomInt(0, 100));
this.g5.refresh(this.getRandomInt(0, 100));
this.g6.refresh(this.getRandomInt(0, 100));
}, 2500);
}
}
</script>9. Font Options(字体选项)
仪表盘上的各种字体样式也可以自定义。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<a href="#" id="g1_refresh" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
g1: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
title: "Font Options",
value: 72,
min: 0,
max: 100,
gaugeWidthScale: 0.6,
counter: true,
titleFontColor: "red",
titleFontFamily: "Georgia",
titlePosition: "below",
valueFontColor: "blue",
valueFontFamily: "Georgia"
});
},
methods: {
random() {
this.g1.refresh(this.getRandomInt(0, 100));
}
}
}
</script>10. Format Number(格式化数字)
将formatNumber设置为true的时候，数字会自动格式化，例如10000会自动变成10,000的形式。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge"></vue-justgage>
<a href="#" id="gg1_refresh" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value: 40960,
min: 1024,
max: 1000000,
gaugeWidthScale: 0.6,
counter: true,
formatNumber: true
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(1024, 1000000));
}
}
}
</script>11. Html5 Data-attribute Setup(data-attribute设置默认值)
除了在option里指定属性，还可以在标签上使用data-attribute的形式设置默认值。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" class="gauge" data-value="1200" data-min="0" data-max="1000000" data-gaugeWidthScale="0.6"></vue-justgage>
<input type="button" id="gg1_refresh" class="btn" value="Random Refresh" @click="random" />
</div>
</template>
<script>
export default {
data() {
return {
gg1: null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
formatNumber: true,
counter: true
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(0, 1000000));
}
}
}
</script>12. Human Friendly Numbers(人类更容易理解的数字)
如果将humanFriendly设置为true，数字就会展示为人类更容易理解的形式，例如10000将会显示为10k。
<template>
<div class="container">
<vue-justgage ref="gg1" id="gg1" style="width: 200px; height: 150px;margin: 0 auto;"></vue-justgage>
<a href="#" id="gg1_refresh" class="button grey" @click="random">Random Refresh</a>
</div>
</template>
<script>
export default {
data() {
return {
gg1:null
}
},
mounted() {
this.gg1 = this.$refs.gg1.draw({
id: "gg1",
value: 1024,
min: 0,
max: 10000,
title: "Target",
label: "",
humanFriendly: true,
startAnimationTime: 10000,
refreshAnimationTime: 10000
});
},
methods: {
random() {
this.gg1.refresh(this.getRandomInt(0, 1000000));
}
}
}
</script>13. Pointer(指针)
自定义指针的样式，通过配置pointerOptions，可选项有：toplength、bottomlength、bottomwidth、color、stroke、stroke_width、stroke_linecap。
<template>
<div>
<div class="wrapper">
<div class="box">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g2" id="g2" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g3" id="g3" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g4" id="g4" class="gauge"></vue-justgage>
</div>
</div>
<div class="container">
<button type="button" id="gauge_refresh" @click="refresh">Refresh Gauges</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: 'g1',
value: 65,
min: 0,
max: 100,
symbol: '%',
pointer: true,
gaugeWidthScale: 0.6,
customSectors: [{
color: '#ff0000',
lo: 50,
hi: 100
}, {
color: '#00ff00',
lo: 0,
hi: 50
}],
counter: true
});
this.g2 = this.$refs.g2.draw({
id: 'g2',
value: 45,
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
gaugeWidthScale: 0.6,
counter: true
});
this.g3 = this.$refs.g3.draw({
id: 'g3',
value: 40,
min: 0,
max: 100,
symbol: '%',
donut: true,
pointer: true,
gaugeWidthScale: 0.4,
pointerOptions: {
toplength: 10,
bottomlength: 10,
bottomwidth: 8,
color: '#000'
},
customSectors: [{
color: "#ff0000",
lo: 50,
hi: 100
}, {
color: "#00ff00",
lo: 0,
hi: 50
}],
counter: true
});
this.g4 = this.$refs.g4.draw({
id: 'g4',
value: 70,
min: 0,
max: 100,
symbol: '%',
pointer: true,
pointerOptions: {
toplength: 8,
bottomlength: -20,
bottomwidth: 6,
color: '#8e8e93'
},
gaugeWidthScale: 0.1,
counter: true
});
},
methods: {
refresh() {
this.g1.refresh(this.getRandomInt(0, 100));
this.g2.refresh(this.getRandomInt(0, 100));
this.g3.refresh(this.getRandomInt(0, 100));
this.g4.refresh(this.getRandomInt(0, 100));
}
}
}
</script>14. Refresh Maximum(设置最大值)
justgage可以动态的重新设置最大值。
<template>
<div class="container">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<a href="#" id="g1_refresh" class="button grey" @click="random">Random Refresh</a>
<br />
<a href="#" id="g1_setmax100" class="button grey" @click="setMax(100)">Set Max 100</a>
<a href="#" id="g1_setmax200" class="button grey" @click="setMax(200)">Set Max 200</a>
<a href="#" id="g1_setmax400" class="button grey" @click="setMax(400)">Set Max 400</a>
</div>
</template>
<script>
export default {
data() {
return {
g1: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: "g1",
title: "Max is 100.",
value: 50,
min: 0,
max: 100,
decimals: 0,
gaugeWidthScale: 0.6
});
},
methods: {
random() {
this.g1.refresh(this.getRandomInt(0, 100));
},
setMax(num) {
var text = new Map([
[100, "Max is 100."],
[200, "Whoops, max jumped to 200."],
[400, "Blimey, max blasted to 400!"]
]);
this.g1.refresh(this.g1.originalValue, num);
this.g1.txtTitle.attr({
"text": text.get(num)
});
}
}
}
</script>15. Responsive Gauges(自适应)
将relativeGaugeSize属性设置为true，仪表盘的大小会根据容器大小自适应。
<template>
<div class="container">
<div class="wrapper clear">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
<vue-justgage ref="g2" id="g2" class="gauge"></vue-justgage>
<vue-justgage ref="g3" id="g3" class="gauge"></vue-justgage>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
var g1 = this.$refs.g1.draw({
id: "g1",
value: this.getRandomInt(0, 1000),
min: 0,
max: 1000,
relativeGaugeSize: true,
donut: true
});
var g2 = this.$refs.g2.draw({
id: "g2",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Very long title",
relativeGaugeSize: true,
donut: true
});
var g3 = this.$refs.g3.draw({
id: "g3",
value: this.getRandomInt(0, 100),
min: 0,
max: 100,
title: "Very long title",
label: "label",
relativeGaugeSize: true,
donut: true
});
}
}
</script>16. Reverse(反转最大最小值)
将reverse设置为true，最大最小值的位置会反过来。
<template>
<div>
<div class="wrapper">
<div class="box">
<vue-justgage ref="g1" id="g1" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g2" id="g2" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g3" id="g3" class="gauge"></vue-justgage>
</div>
<div class="box">
<vue-justgage ref="g4" id="g4" class="gauge"></vue-justgage>
</div>
</div>
<div class="container">
<button type="button" id="gauge_refresh" @click="refresh">Refresh Gauges</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
g1: null,
g2: null,
g3: null,
g4: null
}
},
mounted() {
this.g1 = this.$refs.g1.draw({
id: 'g1',
value: 65,
min: 0,
max: 100,
reverse: true,
gaugeWidthScale: 0.6,
customSectors: [{
color: '#ff0000',
lo: 50,
hi: 100
}, {
color: '#00ff00',
lo: 0,
hi: 50
}],
counter: true
});
this.g2 = this.$refs.g2.draw({
id: 'g2',
value: 45,
min: 0,
max: 500,
reverse: true,
gaugeWidthScale: 0.6,
counter: true
});
this.g3 = this.$refs.g3.draw({
id: 'g3',
value: 25000,
min: 0,
max: 100000,
humanFriendly : true,
reverse: true,
gaugeWidthScale: 1.3,
customSectors: [{
color: "#ff0000",
lo: 50000,
hi: 100000
}, {
color: "#00ff00",
lo: 0,
hi: 50000
}],
counter: true
});
this.g4 = this.$refs.g4.draw({
id: 'g4',
value: 90,
min: 0,
max: 100,
symbol: '%',
reverse: true,
gaugeWidthScale: 0.1,
counter: true
});
},
methods: {
refresh() {
this.g1.refresh(this.getRandomInt(0, 100));
this.g2.refresh(this.getRandomInt(0, 100));
this.g3.refresh(this.getRandomInt(0, 100000));
this.g4.refresh(this.getRandomInt(0, 100));
}
}
}
</script>总结
几乎justgage的所有用法都能在例子中找到相应的展示，如果不是需要深入研究或掌握插件，简单的看一看文档就可以快速上手。
最后感谢每一个使用我写的插件的人~
有任何问题都可以留言或私信或在github上告诉我。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。